<template>
  <div class="etf-activity">
    <div class="successful">
      <div v-if="reserveSort <= 666">
        <!-- <img src="./assets/successful.png" alt="预约成功页" /> -->
        <div class="successful1">
          <img src="./assets/successful1.png" alt="预约成功页" />
        </div>
        <div class="ranking">
          <div class="sort">
            <span class="span span1">您是第</span>
            {{ reserveSort }}
            <span class="span">/ 666位</span>
          </div>
          <img src="./assets/successful2.png" alt="先行者" />
        </div>
        <div>
          <img v-lazy="'successful3.png'" alt="风险提示" />
        </div>
      </div>
      <div v-else>
        <img src="./assets/bealreadyfull.png" alt="预约已满页" />
      </div>
    </div>
    <div class="share" @click="handleShare">
      <img src="./assets/share.png" alt="分享" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onBeforeMount, onMounted, onBeforeUnmount } from "vue";
import { shareNewsUrl, pageView, pageDuration, pageIconClick } from "@/utils";
import { useRoute } from "vue-router";
import { ETF_ACTIVITY_TITLE } from "@/consts";
const route = useRoute();
const baseURL = import.meta.env.VITE_BASE_URL;
const sensorsStartTime = ref(0); // 开始时间
const sensorsEndTime = ref(0); // 结束时间

onBeforeMount(() => {
  sensorsStartTime.value = Number(new Date());
  pageView({
    page_title: ETF_ACTIVITY_TITLE,
    Page_from: route.query.Page_from || "",
    is_Operactmainpage: "1",
    is_login: true,
    is_accountlogin: true,
  });
});

let reserveSort = JSON.parse(localStorage.getItem("reserveSort") as string);
onMounted(() => {
  console.log(reserveSort, "预约排序位666");
});

onBeforeUnmount(() => {
  sensorsEndTime.value = Number(new Date());
  pageDuration({
    page_title: ETF_ACTIVITY_TITLE,
    is_login: true,
    event_duration: (sensorsEndTime.value - sensorsStartTime.value) / 1000,
  });
});

const handleShare = () => {
  shareNewsUrl(
    import.meta.env.VITE_ETF_SHARE_URL,
    "《接招！ETF》666个永久免费签约资格限时送！",
    "ETF投资，咬定青山还是待时而动？敬请接招！"
  );
  pageIconClick({
    mainpage_icon_section: "底部",
    mainpage_icon_name: "点击分享-炫耀一下",
    mainpage_icon_index: "1",
  });
};
</script>

<style lang="less" src="./assets/etf-free-ticket.less" scoped></style>
